<html>
    <head>
        <script>
            /* from http://www.quirksmode.org/js/findpos.html */
            var whereIs = function (element) {
                var left = top = 0;
                if (element.offsetParent) {
                    left = element.offsetLeft;
                    top = element.offsetTop;
                    while (element.offsetParent) {
                        element = element.offsetParent;
                        left += element.offsetLeft;
                        top += element.offsetTop;
                    }
                }
                return {left: left, top: top};
            }
            var whatSize = function (element) {
                return {
                    width: element.clientWidth,
                    height: element.clientHeight
                }
            }
            var initOption = function (element) {
                element.onclick = function () {
                    var controlId = element.parentNode.getAttribute('control');
                    var control = document.getElementById(controlId);
                    control.value = element.getAttribute('value');
                    control.select();
                    control.setSelectionRange(control.value.length, control.value.length);
                }
            }
        </script>
        <style>
            body, .option, .choice {
                font-family: Verdana, sans-serif;
            }
            .choice {
                padding: 1px;
                border-top: solid gray 1px;
                border-left: solid gray 1px;
                border-bottom: solid black 1px;
                border-right: solid black 1px;
                -moz-border-radius: 6px;
            }
            .options {
                visibility: hidden;
                position: absolute;
                padding: 1px;
                background-color: #eeeeee;
                border-top: solid #aaaaaa 1px;
                border-left: solid #aaaaaa 1px;
                border-bottom: solid #777777 1px;
                border-right: solid #777777 1px;
            }
            .option {
                display: block;
                padding: 1px;
            }
            .options div:hover {
                background-color: #3377aa;
                color: #ffffff;
            }
            .selected  {
                background-color: #3377aa;
                color: #ffffff;
            }
        </style>
    </head>
    <body>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <input type="textbox" id="GUID" class="choice" disableAutocomplete="true"/>
        <div class="options" id="BLOCK" control="GUID">
            <div class="option" value="hello" id="A"><span></span><span class="selected"></span><span>hello</span></div>
            <script>initOption(document.getElementById('A'))</script>
            <div class="option" value="help" id="B"><span></span><span class="selected"></span><span>help</span></div>
            <script>initOption(document.getElementById('B'))</script>
            <div class="option" value="bye" id="C"><span></span><span class="selected"></span><span>bye</span></div>
            <script>initOption(document.getElementById('C'))</script>
        </div>
        <script>
            var textbox = document.getElementById('GUID');
            var options = document.getElementById('BLOCK');
            options.style.left = whereIs(textbox).left;
            options.style.width = whatSize(textbox).width - 2;
            if (false) {
                // display above
                options.style.top = whereIs(textbox).top - whatSize(options).height - 3;
            } else {
                // display below
                options.style.top = whereIs(textbox).top + whatSize(textbox).height + 3;
            }
            var commonStartsLength = function (a, b) {
                var index = 0;
                var length = Math.min(a.length, b.length);
                while (index < length) {
                    if (a.substr(0, index) != b.substr(0, index)) {
                        break;
                    }
                    index++;
                }
                return index;
            }
            var updateOptions = function () {
                var option = options.firstChild;
                var value = textbox.value;
                while (option) {
                    if (option.nodeType == 1 && option.nodeName == 'DIV') {
                        var preSelectedSpan = option.firstChild;
                        var selectedSpan = preSelectedSpan.nextSibling;
                        var postSelectedSpan = selectedSpan.nextSibling;
                        var optionValue = option.getAttribute('value');
                        if (
                            optionValue.length >= value.length &&
                            optionValue.substr(0, value.length) == value
                        ) {
                            selectedSpan.innerHTML = value;
                            postSelectedSpan.innerHTML = optionValue.substr(value.length);
                        } else {
                            selectedSpan.innerHTML = '';
                            postSelectedSpan.innerHTML = optionValue;
                        }
                    }
                    option = option.nextSibling;
                }
            }
            textbox.onfocus = function () {
                options.style.visibility = 'visible';
            }
            textbox.onblur = function () {
                options.style.visibility = 'hidden';
            }
            textbox.onkeyup = function (event) {
                var keyCode;
                if (window.event) { // IE
                    keyCode = event.keyCode;
                } else if (event.which) { // Mozilla-like
                    keyCode = event.which;
                } else {
                    raise;
                }
                var key = String.fromCharCode(keyCode);

                if (keyCode == 9) { // ctrl
                    textbox.setSelectionRange(textbox.value.length, textbox.value.length);
                } else if (keyCode != 8) { // backspace
                    if (textbox.value == 'h') {
                        textbox.value = 'hel';
                        textbox.setSelectionRange(1, 'hel'.length);
                    }
                }
                updateOptions();
            }
        </script>
    </body>
</html>
